@import "../../assets/styles/var";
@import "../../assets/styles/mixins";
.sub-header {
  display: flex  !important;
  background-color: #1d1f24  !important;
  height: $--g-header-height !important;
  align-items: center  !important;
  padding: 0 $--g-header-gutter  !important;
  line-height: $--g-header-height  !important;
  position: relative  !important;
  transition: background-color 0.05s ease  !important;
  display: block  !important;

  .sub-header__iconbox {
    float: left;
  }

  &__logo {
    float: left;
  }

  /deep/ .header-suffix {
    float: right;
    line-height: 56px;
  }

  .header-user {
    float: right;
    /deep/ .header-user-content{
      i{
        display: inline-block;
        vertical-align: middle;
      }
      a{
        display: inline-block;
      }
    }
  }

  .is-color & {
    background-color: $--g-header-background-color;
  }

  &-wrap {
    .sub-layout--single & {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      left: 0;
    }
  }

  &:after {
    @include opacity_line;
  }

  &__horizontal {
    padding: 0 140px;
    background-color: $--g-header-background-color-secondary;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }

  &__interrelation {
    padding: 0 28px;
    background-color: $--g-header-background-color-secondary;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }

  &__secondary {
    height: $--g-header-height;
    line-height: $--g-header-height;
    padding: 0 140px;
    position: fixed;
    top: $--g-header-height;
    right: 0;
    left: 0;
    z-index: 1;
  }

  &__trigger {
    color: #fff;
    cursor: pointer;
  }

  &__title {
    color: #fff;
    font-size: 14px;
    margin-left: 12px;
  }
}
.secondary {
  background: #fff;
}

